<div  th:fragment = "headerNav" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"  >
    <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar" style="background-color: #563d7c;" >

        <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap">
            <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
                <title>Oylan Manager System</title>
                <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
                <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
            </svg>
        </a>

        <div class="navbar-nav-scroll">
            <ul class="navbar-nav bd-navbar-nav flex-row nav-root">
                <li shiro:hasPermission="${item.actionCode}" th:each="item:${parentMenus}" th:class="${item.url == '/admin/welcome'}?'active'" >
                    <a class="nav-link" href="javascript:void(0);" th:onclick="go([[${item.id}]],[[${item.url}]]);" th:text="${item.actionName}" ></a>
                </li>
            </ul>
        </div>

        <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
            <li class="nav-item">
                <a href="/" target="_blank" class="nav-link"  hreflang="hello" > 网站首页 </a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span style="font-size: 13px">欢迎</span> , Admin
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">修改密码</a>
                    <a class="dropdown-item" href="#">修改个人资料</a>
                    <a class="dropdown-item" href="/admin/logout">退出登录</a>
                </div>
            </li>
        </ul>
    </header>
</div>
<!--  左边菜单 -->
<div th:fragment = "menus" xmlns:th="http://www.thymeleaf.org" >
    <style>
        #menusItems .child-nav{
            color: #666666;
            font-size: 14px;
        }
        #menusItems .active{
            color: #000000;
            font-size: 15px;
        }
    </style>
    <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
        </button>
    </form>
    <nav class="collapse bd-links" id="bd-docs-nav">
        <div class="bd-toc-item" id="menusItems"></div>
    </nav>
    <script th:inline="JavaScript" >

        function go(id,url) {
            setMenus(id);
            goPage(url);
        }
        setMenus(1);

        $(".nav-root li").click(function () {
            $(this).siblings('li').removeClass('active');
            $(this).addClass('active')
        })

        function setMenus(id) {
            $.get("/admin/menus",{
              id:id
            },function (data) {
                var html = '';
                $.each(data.list,function (k,v) {
                    var url = "'"+v.url+"'";
                    html+= '<a class="bd-toc-link';
                        if(k == 0){
                            html += ' active'
                        }
                        html+=' child-nav" href="javascript:goPage('+url+');">'+v.actionName+'</a>';
                })
                $("#menusItems").html(html)
            })
        }

        function goPage(url) {
            $("#mainFrame").attr("src",url);
            window.location.hash = url;
        }

        $(document).on('click','.child-nav',function(){
            $(this).siblings('.child-nav').removeClass('active');
            $(this).addClass('active')
        })

    </script>
</div>